<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My first BootStrap demo</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	
	<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	
	
  </head>
  
  <body>
  <div id="main" align="center">
  	<div id="header">
  	
  	</div>
	<div id="content">
		<h1>Hello, BoortStarp!</h1>
		<div class="content_div" id="btnDemo">
		  	<fieldset>
				<legend>button</legend>
				<div class="row_div" align="left">
					<button type="button" class="btn btn-default">默认</button>
					<button type="button" class="btn btn-primary">主要</button>
					<button type="button" class="btn btn-success">成功</button>
					<button type="button" class="btn btn-info">信息</button>
					<button type="button" class="btn btn-warning">警告</button>
					<button type="button" class="btn btn-danger">危险</button>
					<button type="button" class="btn btn-link">链接</button>
				</div>
				<div class="row_div" align="left">
					<button type="button" class="btn btn-default btn-lg">Larger button</button>
					<button type="button" class="btn btn-primary btn-sm">Small button</button>
					<button type="button" class="btn btn-success">Default button</button>
					<button type="button" class="btn btn-warning btn-xs">Extra button</button>
				</div>
				<div class="row_div" align="left">
					<div style="width:300px;height:45px;">
						<button type="button" class="btn btn-danger btn-lg btn-block">Block button <small>block</small></button>
					</div>
				</div>
				<div class="row_div" align="left">
					<a href="http://www.baidu.com" target="_blank" class="btn btn-primary btn-lg">链接按钮</a>
				</div>
		 	</fieldset>
	 	</div>
	 	<div class="content_div" id="textDemo">
	 		<fieldset>
	 			<legend>text</legend>
	 			<div class="row_div" align="left">
	 				<p class="text-muted">This is muted text...</p>
	 				<p class="text-default">This is default text...</p>
	 				<p class="text-primary">This is primary text...</p>
	 				<p class="text-success">This is success text...</p>
	 				<p class="text-info">This is info text...</p>
	 				<p class="text-warning">This is warning text...</p>
	 				<p class="text-danger">This is danger text...</p>
	 			</div>
	 		</fieldset>
	 	</div>
	 	<div class="content_div" id="textAbbreviationDemo">
	 		<fieldset>
	 			<legend>text abbreviation</legend>
	 			<div class="row_div" align="left">
	 				<abbr title="abbreviation" class="text-primary">abbr</abbr><br><br>
	 				<abbr title="Hypertext Markup Language" class="initialism">HTML</abbr><br><br>
	 				<abbr title="Email" class="text-success"><b>M:</b></abbr><a href="mailto:wy"> 2345@qq.com</a><br><br>
	 				<blockquote>
	 					<p>This is default blockquote</p>
	 				</blockquote>
	 				<blockquote>
		 				<p>Learn more knowladge is usefull to us.This is othre blockquote...</p>
		 				<small>This is come from <cite title="Wang Yue"> wy</cite></small>
	 				</blockquote>
	 				<blockquote class="pull-right">
	 					<p>This pull-right style...</p>
	 					<small>come from <cite title="Wang Yue">wy</cite></small>
	 				</blockquote>
	 			</div>
	 		</fieldset>
	 	</div>
	 	<div class="content_div" id="ulDemo">
	 		<fieldset>
	 			<legend>列表 UL(无序) OL(有序)</legend>
	 			<div class="row_div" align="left">
	 				<ul>
	 					<li>无序列表</li>
	 					<li class="text-default">1111</li>
	 					<li class="text-primary">2222</li>
	 					<li class="text-success">3333</li>
 						<ul>
 							<li>wy</li>
 							<li>lv</li>
 							<li>bc</li>
 						</ul>
	 				</ul>
	 			</div>
	 			<div class="row_div" align="left">
	 				<ol>
	 					<li>有序列表</li>
	 					<li>pq</li>
	 					<li>lv</li>
	 					<li>wy</li>
	 					<ol>
	 						<li>wy</li>
 							<li>lv</li>
 							<li>bc</li>
	 					</ol>
	 				</ol>
	 			</div>
	 			<div class="row_div" align="left">
	 				<ul class="list-unstyled">
	 					<li>无样式列表</li>
	 					<li>pq</li>
	 					<li>lv</li>
	 					<li>wy</li>
	 				</ul>
	 			</div>
	 		</fieldset>
	 	</div>
	  	<div class="content_div" id="tableDemo">
	  		<fieldset>
	  			<legend>table</legend>
	  			<div class="row_div" align="left">
	  				<p class="text-danger">基本表格:table</p>
	  				<table class="table">
	  					<tr>
	  						<td>#</td>
	  						<td>First Name</td>
	  						<td>Last Name</td>
	  						<td>Username</td>
	  					</tr>
	  					<tr>
	  						<td>1</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<td>2</td>
	  						<td>Denry</td>
	  						<td>Wade</td>
	  						<td>@wade</td>
	  					</tr>
	  				</table>
	  				<hr>
	  				<p class="text-danger">条纹表格：table-striped</p>
	  				<table class="table table-striped">
	  					<tr>
	  						<td>#</td>
	  						<td>First Name</td>
	  						<td>Last Name</td>
	  						<td>Username</td>
	  					</tr>
	  					<tr>
	  						<td>1</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<td>2</td>
	  						<td>Denry</td>
	  						<td>Wade</td>
	  						<td>@wade</td>
	  					</tr>
	  				</table>
	  				<hr>
	  				<p class="text-danger">带边框的表格：table-bordered</p>
	  				<table class="table table-bordered table-striped">
	  					<tr>
	  						<td>#</td>
	  						<td>First Name</td>
	  						<td>Last Name</td>
	  						<td>Username</td>
	  					</tr>
	  					<tr>
	  						<td>1</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<td rowspan="2">2</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<!-- <td>2</td> -->
	  						<td>Denry</td>
	  						<td>Wade</td>
	  						<td>@wade</td>
	  					</tr>
	  					<tr>
	  						<td>3</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  				</table>
	  				<hr>
	  				<p class="text-danger">鼠标悬停：table-hover</p>
	  				<table class="table table-bordered table-hover">
	  					<tr>
	  						<td>#</td>
	  						<td>First Name</td>
	  						<td>Last Name</td>
	  						<td>Username</td>
	  					</tr>
	  					<tr>
	  						<td>1</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<td rowspan="2">2</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<!-- <td>2</td> -->
	  						<td>Denry</td>
	  						<td>Wade</td>
	  						<td>@wade</td>
	  					</tr>
	  					<tr>
	  						<td>3</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  				</table>
	  				<hr>
	  				<p class="text-danger">缩紧表格：table-condensed</p>
	  				<table class="table table-bordered table-hover table-condensed">
	  					<tr>
	  						<td>#</td>
	  						<td>First Name</td>
	  						<td>Last Name</td>
	  						<td>Username</td>
	  					</tr>
	  					<tr>
	  						<td>1</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<td rowspan="2">2</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<!-- <td>2</td> -->
	  						<td>Denry</td>
	  						<td>Wade</td>
	  						<td>@wade</td>
	  					</tr>
	  					<tr>
	  						<td>3</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  				</table>
	  				
	  				<blockquote>
	  					<p class="text-danger">active/success/warning/danger 四个状态class</p>
	  					<small>通过这些状态class可以为行或单元格设置颜色</small>
	  				</blockquote>
	  				<table class="table table-bordered table-hover">
	  					<tr class="active">
	  						<td>1</td>
	  						<td>2</td>
	  						<td>3</td>
	  						<td>4</td>
	  					</tr>
	  					<tr>
	  						<td class="active">4</td>
	  						<td class="success">3</td>
	  						<td class="warning">2</td>
	  						<td class="danger">1</td>
	  					</tr>
	  					<tr>
	  						<td>1</td>
	  						<td>2</td>
	  						<td>3</td>
	  						<td>4</td>
	  					</tr>
	  				</table>
	  				<blockquote>
	  					<p class="text-danger">有条纹+鼠标悬停+右边框+缩紧：table-striped / table-hover / table-bordered / table-condensed</p>
	  					<small>test</small>
	  				</blockquote>
	  				<table class="table table-striped table-hover table-bordered table-condensed">
	  					<tr>
	  						<td>#</td>
	  						<td>First Name</td>
	  						<td>Last Name</td>
	  						<td>Username</td>
	  					</tr>
	  					<tr>
	  						<td>1</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<td>2</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  					<tr>
	  						<td>3</td>
	  						<td>Denry</td>
	  						<td>Wade</td>
	  						<td>@wade</td>
	  					</tr>
	  					<tr>
	  						<td>4</td>
	  						<td>Dim</td>
	  						<td>Denkon</td>
	  						<td>@dim</td>
	  					</tr>
	  				</table>
	  			</div>
	  		</fieldset>
	  	</div>
	  	<div class="content_div" id="formDemo">
			<fieldset>
				<legend>form</legend>
				<div class="row_div" align="left">
					<form role="form" action="index_formDemo.jsp">
						<div class="form-group">
 						<label for="exampleInputEmail_1">Email Address</label>
 						<input type="email" class="form-control" id="exampleInputEmail_1" placeholder="Enter email">
						</div>
						<div class="form-group">
 						<label for="exampleInputPassword_1">Password</label>
 						<input type="email" class="form-control" id="exampleInputPassword_1" placeholder="Enter password">
 					</div>
 					<div class="form-group">
 						<label for="exampleInputFile_1">File input</label>
 						<input type="file" id="exampleInputFile_1">
 						<p class="help-block">Example help</p>
 					</div>
 					<div class="ckeckbox">
 						<label>
 							<input type="checkbox"> Check me out
 						</label>
 					</div>
 					<button type="submit" class="btn btn-primary">Submit</button>
					</form>
				</div>
				<div class="row_div" align="left">
					<blockquote>
						<p class="text-danger">内联表单：form-->.form-inline  label-->.sr-only(隐藏label)</p>
						<small></small>
					</blockquote>
					<form class="form-inline" role="form" action="index_formDemo.jsp">
						<div class="form-group">
							<label class="sr-only" for="inputEmail_2">Enter Email:</label>
							<input type="email" class="form-control" id="inputEmail_2" placeholder="Enter email">
						</div>
						<div class="form-group">
							<label class="sr-only" for="inputPassword_2">Enter Password:</label>
							<input type="password" class="form-control" id="inputPassword_2" placeholder="Enter password">
						</div>
						<div class="checkbox">
							<label>
								<input type="checkbox"> Remenber me
							</label>
						</div>
						<button type="submit" class="btn btn-primary">Sing in</button>
					</form>
				</div>
			</fieldset>
		</div>
		<div class="content_div" id="imgDemo">
			<fieldset>
				<legend>Img Demo</legend>
				<div class="row_div" align="left">
					<img src="images/li_1.jpg" alt="..." class="img-rounded" style="width: 140px;height: 140px;margin:10px;">
					<img src="images/li_1.jpg" alt="..." class="img-circle" style="width: 140px;height: 140px;margin:10px;" >
					<img src="images/li_1.jpg" alt="..." class="img-thumbnail" style="width:140px;height:140px;margin:10px;">
				</div>
				<div class="row_div" align="left">
					<div style="width: 140px; height: 140px;border:1px solid gray;padding: 20px;margin: 10px;">
						<div class="center-block">
							fasdf
						</div>
					</div>
				</div>
				<div class="row_div" align="left">
					
				</div>
			</fieldset>
		</div>
  	</div> 
  	<div id="bottom">
  	
  	</div>
  </div>
  </body>
</html>
